<template>
    <div class="chat-item" :class="active ? 'active' : ''" @contextmenu.prevent="showRightMenu($event)">
        <div class="chat-left">
            <!-- <el-avatar :icon="UserFilled" /> -->
            <el-avatar :src="!!chat.headImage ? chat.headImage : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'" />
            <!-- <head-image :url="chat.headImage" :name="chat.showName" :size="42"
				:id="chat.type == 'PRIVATE' ? chat.targetId : 0" :isShowUserInfo="false"></head-image>
			<div v-show="chat.unreadCount > 0" class="unread-text">{{ chat.unreadCount }}</div> -->
        </div>
        <div class="chat-right">
            <div class="chat-name">
                <div class="chat-name-text">
                    <div>{{ chat.nickName }}</div>
                    <!-- <el-tag v-if="chat.type == 'GROUP'" size="mini" effect="dark">群</el-tag> -->
                </div>
                <div class="chat-time-text">{{ showTime() }}</div>
            </div>
            <div class="chat-content">
                <div class="chat-content-text">asddsd</div>
                <!-- <div class="chat-at-text">{{ atText }}</div>
				<div class="chat-send-name" v-show="isShowSendName">{{ chat.sendNickName + ':&nbsp;' }}</div>
				<div class="chat-content-text" v-html="$emo.transform(chat.lastContent)"></div> -->
            </div>
        </div>
        <!-- <right-menu v-show="rightMenu.show" :pos="rightMenu.pos" :items="rightMenu.items"
			@close="rightMenu.show = false" @select="onSelectMenu"></right-menu> -->
    </div>

</template>

<script setup>

const props = defineProps({
    chat: {
        type: Object,
        required: true
    }
})
const showTime = () => {
    //return date.toTimeText(props.chat.lastSendTime, true)
    return '02.05'
}
</script>

<style lang="scss">
.chat-item {
    height: 50px;
    display: flex;
    position: relative;
    padding: 5px 10px;
    align-items: center;
    background-color: var(--im-background);
    white-space: nowrap;
    cursor: pointer;

    &:hover {
        background-color: var(--im-background-active);
    }

    &.active {
        background-color: var(--im-background-active-dark);
    }

    .chat-left {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;

        .unread-text {
            position: absolute;
            background-color: #f56c6c;
            right: -4px;
            top: -8px;
            color: white;
            border-radius: 30px;
            padding: 1px 5px;
            font-size: 10px;
            text-align: center;
            white-space: nowrap;
            border: 1px solid #f1e5e5;
        }
    }


    .chat-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding-left: 10px;
        text-align: left;
        overflow: hidden;

        .chat-name {
            display: flex;
            line-height: 20px;
            height: 20px;

            .chat-name-text {
                flex: 1;
                display: flex;
                align-items: center;
                font-size: var(--im-font-size);
                white-space: nowrap;
                overflow: hidden;

                .el-tag {
                    min-width: 22px;
                    text-align: center;
                    background-color: #2830d3;
                    border-radius: 10px;
                    border: 0;
                    height: 16px;
                    line-height: 16px;
                    font-size: 10px;
                    margin-left: 2px;
                    opacity: 0.8;

                }
            }

            .chat-time-text {
                font-size: 12px;
                text-align: right;
                color: var(--im-text-color-light);
                white-space: nowrap;
                overflow: hidden;
                padding-left: 10px;
            }
        }

        .chat-content {
            display: flex;
            line-height: 22px;

            .chat-at-text {
                color: #c70b0b;
                font-size: var(--im-font-size-smaller);
            }

            .chat-send-name {
                font-size: var(--im-font-size-small);
                color: var(--im-text-color-light);
            }


            .chat-content-text {
                flex: 1;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: var(--im-font-size-small);
                color: var(--im-text-color-light);

                img {
                    width: 20px !important;
                    height: 20px !important;
                    vertical-align: bottom;
                }
            }

        }
    }
}
</style>